<template>
    <div class="gds-panel">
		<van-checkbox v-model="gds.checked" @click="checkSkuAll(gds.checked)"/>
		<van-image :src="gds.gdsImg" @click="to('/goods/detail?gdsId='+gds.gdsId)"/>
		<div class="flex-1">
			<router-link :to="'/goods/detail?gdsId='+gds.gdsId" class="gds-main van-multi-ellipsis--l2">{{gds.gdsName}}</router-link>
			<div class="flex">
				<van-tag v-if="gds.priceLadders&&gds.priceLadders.length>1" plain color="var(--van-info-color)" class="mgr10" @click="ladderShow=true">阶梯价<van-icon name="arrow-down" /></van-tag>
				<GoodsActivitySheet v-if="gds.activityList&&gds.activityList.length>1" :shop-id="shopId" :gds-id="gds.gdsId" :shortShow="true" :activity-list="gds.activityList"/>
			</div>
		</div>
		<div class="sku-panel">
			<div class="sku-item" v-for="sku in gds.skuList" :key="sku.skuId">
				<van-checkbox v-model="sku.checked" @change="chkSkuIdentity"/>
				<van-image :src="sku.skuImg" v-if="sku.skuImg"/>
				<div class="sku-title">
					<span>{{sku.propNames.join(' &middot; ')}}</span>
					<span class="txt-gray">剩{{sku.maxAmount}}</span>
				</div>
				<div class="sku-oper">
					<div v-if="gds.priceLadders&&gds.priceLadders.length>1">
						<span class="txt-primary"><span class="font-12">￥</span><b class="font-16">{{fen2Yuan2(afterPrice)}}</b></span>
						<span class="mgl10 txt-gray font-12">{{ladderFixed}}</span>
					</div>
					<div v-else>
						<span class="txt-primary"><span class="font-12">￥</span><b class="font-16">{{fen2Yuan2(sku.realSkuPrice||0)}}</b></span>
					</div>
					<van-stepper v-show="!operSwitch" v-model="sku.selectNum" :min="sku.minAmount" :max="sku.maxAmount" integer @change="function(){skuAmountPrice()}"/>
				</div>
			</div>
		</div>
		<van-action-sheet v-model:show="ladderShow" title="阶梯价" v-if="gds.priceLadders&&gds.priceLadders.length>1" cancel-text="关闭">
			<div class="ladder-wrap">
				<div class="block" v-for="ladder in gds.priceLadders" key="index">
					<div class="price-ladder"><small>￥</small><span>{{fen2Yuan2(ladder.afterAmountPrice)}}</span></div>
					<div class="num-range" v-if="ladder.buyMaxAmount>0">{{ladder.buyMinAmount}}~{{ladder.buyMaxAmount}}件</div>
					<div class="num-range" v-else>≥{{ladder.buyMinAmount}}件</div>
				</div>
			</div>
		</van-action-sheet>
	</div>
</template>
<style lang="scss" scoped>
.gds-panel{
	padding:10px 12px; display:flex; align-items: stretch;border-bottom:1px solid var(--border-lighter-color);flex-wrap: wrap;
	&:last-child{border-bottom:none;}
	&>.van-image{
		width:68px;height:68px;border-radius:8px;overflow:hidden;margin:0 8px;
	}
	.gds-main{
		font-size:13px;height:38px;line-height:19px;font-weight:bold; display:block; color:var(--font-first-color);
		&+.flex{height:20px;margin:5px 0;}
	}
	.sku-panel{
		width:100%;padding-top:5px;
		.sku-item{
			padding:5px 0;height:80px;display:flex; flex-wrap: wrap;
			&>.van-image{
				width:30px;height:30px;border-radius:4px;overflow:hidden;margin-left:8px;
			}
			.sku-title{
				flex:1;display:flex; border-radius:4px; padding:0 8px; color:var(--font-second-color); font-size:13px;height:30px;
				background: var(--bar-input-color); align-items: center; justify-content: space-between;margin-left:8px;
			}
			.sku-oper{
				width:100%; display:flex; align-items: center;padding-left:30px; justify-content: space-between; height:40px;
			}
		}
	}
}
.ladder-wrap{
	height:60px; display:flex; align-items: stretch; padding:0 8px;
	.block{flex:1;text-align: center;padding-top:10px;}
	.price-ladder{
		color:var(--van-primary-color);
		span{display:inline-block;font-size:18px;line-height:20px;height:20px;}
		small{ font-family: Helvetica;font-size:12px;}
	}
	.num-range{
		line-height: 24px;height:24px;font-size:12px; color:var(--font-second-color);
	}
}
</style>
<script lang="ts" setup>
import { showImagePreview } from 'vant';
import {CartGoods,CartSku} from "@/types";
import {fen2Yuan, fen2Yuan2} from "@/utils/validate";
const {to} =useGoto()
//props
const props = defineProps<{
	gds:CartGoods,
	shopId:string,
	operSwitch:boolean|undefined
}>()
//emits
const emit = defineEmits<{
	(e: 'check-sku', val: boolean,/*num:number*/): void
	(e: 'toggle-all', val: boolean,/*num:number*/): void
}>()

//data
const ladderShow=ref(false)
//const gdsFixedNum=ref(0)
const totalSelectNum=ref(0)
const afterPrice=ref(0) //经过计算后采用的阶梯价

//computed
//计算属性：显示当前SKU选择数量是否匹配当前的阶梯价层级
const ladderFixed = computed(()=>{
	for(let ladder of props.gds.priceLadders){
		if(totalSelectNum.value>=ladder.buyMinAmount){
			if(totalSelectNum.value<=ladder.buyMaxAmount){
				afterPrice.value=ladder.afterAmountPrice
				return ladder.buyMinAmount+'-'+ladder.buyMaxAmount+'件'
			}else if(ladder.buyMaxAmount===0){
				afterPrice.value=ladder.afterAmountPrice
				return '≥'+ladder.buyMinAmount+'件'
			}
		}
	}
	return ''
})

//methods
const calcTotalSelected=()=>{
	let tmp=0
	for(let sku of props.gds.skuList){
		tmp+=sku.selectNum||0
	}
	totalSelectNum.value=tmp
	//console.log(totalSelectNum.value)
}

//计算每一行行SKU中已选数量下的总额
const skuAmountPrice =(isInit?:boolean|false):void=>{
	const ladders = props.gds.priceLadders||[]
	if(!isInit)calcTotalSelected()
	for(let sku of props.gds.skuList){
		sku.selectAllPrice=0
		if(ladders.length===0){
			sku.selectAllPrice=(sku.selectNum||0)*(sku.realSkuPrice||0)
		}else{
			for(let lad of ladders){
				if(totalSelectNum.value>=lad.buyMinAmount){
					if(totalSelectNum.value<=lad.buyMaxAmount||lad.buyMaxAmount===0){
						sku.selectAllPrice=(sku.selectNum||0)*lad.afterAmountPrice
						break
					}
				}
			}
		}
	}


	//return fen2Yuan2(sku.realSkuPrice * sku.selectNum)
}

const chkSkuIdentity = (val:boolean)=>{
	let checkAll=true
	//gdsFixedNum.value=0
	for(let sku of props.gds.skuList){
		if(!sku.checked){
			checkAll=false
		}else{
			//gdsFixedNum.value+=sku.selectNum
			//todo:计算总值
		}
	}
	props.gds.checked=checkAll
	emit('check-sku',val,/*gdsFixedNum.value*/)
}
const checkSkuAll = (val:boolean)=>{
	//gdsFixedNum.value=0
	for(let sku of props.gds.skuList){
		sku.checked = val
		//if(val)gdsFixedNum.value+=sku.selectNum
	}
	emit('toggle-all',val,/*gdsFixedNum.value*/)
}

//beforeMounted 渲染前数据初始化
props.gds.checked=false
for(let sku of props.gds.skuList){
	sku.selectAllPrice=0
	sku.selectNum=sku.minAmount
	sku.realSkuPrice = sku.skuPrice-sku.discountPrice
	sku.checked=false
	totalSelectNum.value+=sku.selectNum
}
skuAmountPrice(true)
</script>